import './list.scss'
import {useState } from 'react';
const List = (props) => {
  const [list, setListarr] = useState(props)
  // 删除
  const butDel = (index) => {
    props.list.splice(index,1)
    let newList=list.list
    setListarr({list:newList})
  }
  return (
    <div className="list">
      <div className='top'>
        <p>日期</p>
        <p>标题</p>
        <p>优先级</p>
      </div>
      <ul>
        {list.list.length > 0 ? list.list.map((item, index) => {
          return (
            <li key={index} className='last'>
              <p className='date'>{item.date}</p>
              <p className='title'>{item.title}</p>
              <p className={[item.priority==='1' ? 'priority1'  : '' || item.priority==='2' ? 'priority2'  : '' || item.priority==='3' ? 'priority3'  : '']}>{item.priority}</p>
              <button className='butDel' onClick={() => butDel(index)}>删除</button>
            </li>
          )
        }) : <li className='no_data'>暂无数据</li>}
      </ul>
    </div>
  );
}

export default List;